<!DOCTYPE html>
<html>
        <head>
     <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">       
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>第5个任务</title>
    <div class="container" style="padding-top:75px">
            <div class="row">
                <div class="col-sm-12" style="text-align:center">
                    <img src="一个图片.jpg" alt="text" width="200" height="200">
                        <h2>Hello,</h2>
                        <p>MY NAME ID OLIVIA24YO AND THIS IS MY RESUME/CV</p>
                </div>
            </div>
                <div class="col-sm-12">
                    <div class="row">
                    <div class="col-xs-12 col-sm-8" >
                      <div class="row"> 
                        <div class="col-xs-12">
                            <h3>//About me</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.</p>
                        </div>
                       </div>    
                        <div class="row">
                            <h3>//Education</h3>
                            <div class="col-xs-12 col-sm-12">
                             <ul>
                                <li>1990<p><strong>I was born in Katowice</strong></li><br/>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, exercitationem, totam, dolores iste dolore est aut modi.</p>
                                <li>2005<strong>Secondary school specializing in artistic</strong></li><br/>
                                Eos, explicabo, nam, tenetur et ab eius deserunt aspernatur ipsum ducimus quibusdam quis voluptatibus.
                                <li>2009<strong>First level graduation in Graphic Design</strong></li><br/>
                                Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus quaerat quibusdam perferendis? Iusto, quibusdam asperiores unde repellat.
                                <li>2012<strong>Second level graduation in Graphic Design</strong></li><br/>
                                Ducimus, aliquam tempore autem itaque et accusantium!
                            </ul>
                            </div>
                        </div>
                             <div class="row"> 
                                <h3>//Experience</h3>
                              <div class="col-xs-12">
                                <ul>
                                    <li>Google<strong>Front-end developer / php programmer</strong><br/>
                                     2013 - 2014</li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis velit sunt similique qui magni totam harum tempore eius laboriosam accusantium necessitatibus voluptatum? Enim, itaque dignissimos quia.
                                    <li>Twitter<strong>Web Developer</strong><br/>
                                      2012</li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium. Quia, qui facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae sed quidem voluptas explicabo soluta.
                                </ul>
                              </div>
                            </div>
                  </div>
                        <div class="col-xs-12 col-sm-4">
                            <div class="row">
                                <div class="col-xs-12">
                                        <h3>//CONTACT</h3>
                                    <ul>
                                        <li><span class="glyphicon glyphicon-earphone" aria-hidden="true">500 345 242</span></li>
                                        <li><span class="glyphicon glyphicon-envelope" aria-hidden="true">office@kamsolutions.pl</span></li>
                                        <li><span class="glyphicon glyphicon-magnet" aria-hidden="true">Twitter</span>
                                        <a href="https://twitter.com/WordPress"></a></li>
                                        <li><span class="glyphicon glyphicon-cloud" aria-hidden="true">Facebook</span>
                                        <a href="https://www.facebook.com/facebook"></a></li>
                                        <li><span class="glyphicon glyphicon-tree-conifer" aria-hidden="true">Skype</span>
                                        <a href="kamsolutions.pl"></a></li>
                                    </ul>
                                </div>
                                <div class="col-xs-12">
                                        <h3><a name="skills"></a>SKILLS</h3>
                                        <ul class="list-unstyled">
                                                <li>Java
                                                    <div class="progress progress-striped active">
                                                        <div class="progress-bar progress-bar-success" role="progressbar"
                                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                             style="width: 90%;">
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>CSS
                                                    <div class="progress progress-striped active">
                                                        <div class="progress-bar progress-bar-info" role="progressbar"
                                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                             style="width: 80%;">
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>jQuery
                                                    <div class="progress progress-striped active">
                                                            <div class="progress-bar progress-bar-warning" role="progressbar"
                                                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                                    style="width: 66%;">
                                                            </div>
                                                        </div>
                                                </li>
                                                <li>PHP
                                                    <div class="progress progress-striped active">
                                                            <div class="progress-bar progress-bar-danger" role="progressbar"
                                                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                                    style="width: 40%;">
                                                            </div>
                                                        </div>
                                                </li>
                                              </ul>
                                </div>
                                <div class="col-xs-12">
                                        <h3><a name="languages"></a>LANGUAGES</h3>
                                        <table class="table">
                                            <tbody>
                                                <tr>
                                                    <td>Chinese</td>
                                                    <td><span class="glyphicon glyphicon-star" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                        <span class="glyphicon glyphicon-star" style="color:red"></span></td>
                                                </tr>
                                                <tr>
                                                        <td>English</td>
                                                        <td><span class="glyphicon glyphicon-star" style="color:red"></span>
                                                            <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                            <span class="glyphicon glyphicon-star" style="color:red"></span>
                                                            <span class="glyphicon glyphicon-star-empty" style="color:red"></span>
                                                            <span class="glyphicon glyphicon-star-empty" style="color:red"></span></td>
                                                    </tr>
                                            </tbody>
                                        </table>
                                </div>
                                <div class="col-xs-12" style="background-color:#00FF80">
                                        <h2><a name="habbies"></a>HABBIES</h2>
                                        <span class="label label-primary">
                                            <span class="glyphicon glyphicon-heart"></span> Eating</span>
    
                                        <span class="label label-success">
                                            <span class="glyphicon glyphicon-heart"></span> Baskteball</span>
                                                
                                        <span class="label label-danger">
                                            <span class="glyphicon glyphicon-heart"></span> LOL</span>   
                                </div>
                            </div>
                        </div>
    
    
                    </div>  
                </div>
            </div>
        </div>
    </body>
</html>